﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/grid_960_16_col.css" cssMode="960" rel="stylesheet" type="text/css" />
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/sub_shoppingcart.css" rel="stylesheet" type="text/css" />
<link href="css/cd.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jpInit();
        $(".draggable").draggable({ opacity: 0.5, revert: true, revertDuration: 200});
        $(".draggable").bind('dragstart', function(){ $(this).css('z-index','99');});
        $(".draggable").bind('dragstop', function(){ $(this).css('z-index','0');});
        $(".droppable").droppable();
        //$( ".droppable" ).droppable({
        //	activeClass: "ui-state-hover",
        //	hoverClass: "ui-state-active",
        //	drop: function( event, ui ) {
        //		$( this )
        //			.addClass( "ui-state-highlight" )
        //	}
        //});

        // 放下
        //$(".droppable").droppable({
        //drop: function(event, ui) { alert(ui.draggable.attr('id')); }
    });

    // 进入
    $(".droppable").bind("dropover", function (event, ui) {
        //        alert(ui.draggable.parent().attr('style'));
        //        if ($('this') == ui.draggable.parent()) {
        //            
        //        } else {

        //        }
    });

</script>
<style type="text/css">
.testingcss{
	border:5px dotted #FFF;
}
.shoppingcart_moveitem {
	background:url(img/icon.png) 3px -117px #EEE no-repeat;
	border:1px #CCC solid;
	display:inline-block;
	height:24px;
	outline:none !important;
	position:absolute;
	right:5px;
	top:5px;
	width:24px;

}
.shoppingcart_moveitem:link {
	
}
.shoppingcart_moveitem:visited {
	
}
.shoppingcart_moveitem:hover {
	background-color:#39F;
	border-color:#0b6fd4;
}

</style>
<title>1200px Testing</title>
</head>

<body>
<div class="top">
	<div class="container_16">
		<div class="grid_16">
			<a href="#" class="logo"></a>
			<div class="menu_links">
				<a href="#" class="menu_link">HOME</a>
				<a href="#" class="menu_link">ALL BRANDS</a>
				<a href="#" class="menu_link">E-GREETINGS</a>
				<a href="#" class="menu_link">NEW ARRIALS</a>

			</div>
			<div class="toptip">
				<div class="toptip_item rightfloat">
					<div class="toptip_wrap radiusbottomright_4px">
						<span class="toptip_label leftfloat">Currencies <strong class="white">$USD</strong></span>
						<div class="ddl_btn"></div>
					</div>
				</div>
				
				<div class="toptip_item rightfloat">
					<div class="toptip_wrap radiusbottomleft_4px">
						<div class="toptip_label">Cart Items <a href="#" class="toptip_label_number green">4</a></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="top_bar realshadow_bottom radiusbottomleft_4px radiusbottomright_4px">
	<div class="container_16">
		<div class="grid_16">
			<div class="search_bar radiusall_4px">
				<input type="text" class="search_txt green"/>
				<input type="button" class="btn search_btn radiusall_2px" value="Find"/>
			</div>
			<div class="login_bar">
				<div class="login_links">
					<a href="#" class="bold">Join us</a>
					<span> - or - </span>
					<a href="#" class="bold">Log in</a>				
				</div>
				<a href="#" style="margin-top:15px;margin-left:8px;display:inline-block;background:url(img/facebook.png);width:150px;height:22px;"></a>
			</div>
			
		</div>
	</div>
</div>

<div class="container_16 shoppingcart">
	<div class="clear_20px"></div>
	<div class="grid_16 textshadow"><h1>Shopping Cart</h1></div>
	<div class="clear_10px"></div>
	<div class="grid_10">
		
	
		<div class="radiusall_4px shadowbox relative shoppingcart_package droppable" id="outer">
						
			<div style="" class="shadowbox radiusall_4px shoppingcart_addr textshadow">
				
				<!--<div class="shoppingcart_packdelete_unactived"></div>-->
				<p style="padding-right:50px;"><span class="gray">Package To &nbsp;</span><strong class="font14px">Patrick Gray</strong>&nbsp; <span>21 Belsay Place Newcastle, Tyne and Wear NE4 5NX 000-0000-00000</span></p>
				<div class="clear_5px"></div>
				<p><a href="#" class="bold black">United Kingdom</a> <span class="gray bold">-</span> <span class="gray"> By </span> <a class="shoppingcart_shipcorp black" href="javascript:void(0)">Hongkong post <span class="ddl_btn"></span></a><span class="gray bold"> - </span><span class="bold green">Free Shipping</span></p>
				<a href="javascript:void(0)" title="edit address" class="shoppingcart_editbtn"></a>
				<a href="#" class="shoppingcart_packdelete"></a>
			</div>
			
			<div class="clear_5px"></div>
			
			
			<div class="shoppingcart_cartitem radiusall_4px draggable" title="High Quality Headphones - Beats By Dr.Dre">
				<a class="shoppingcart_img" href="#">
					<img src="http://thumbs2.ebaystatic.com/m/mcpjpSaneWAFScKfL9PVdSA/140.jpg"/>
				</a>
				<p class="font088em bold"><a href="#">Beats Studio - Lakers</a></p>
				<div>
					<strong class="font088em">Qty </strong><input class="textbox shoppingcart_qty" type="text" value="1"/>
					<strong class="font088em brown">$299.95 </strong>
				</div>
				<div class="favor"></div>
				<div class="shoppingcart_itemdelete"></div>
			</div>
			<div class="shoppingcart_cartitem radiusall_4px draggable" title="High Quality Headphones - Beats By Dr.Dre">
				<a class="shoppingcart_img" href="#">
					<img src="http://thumbs2.ebaystatic.com/m/mnnb2L2xwSqFOJj-T2hwXXg/140.jpg"/>
				</a>
				<p class="font088em bold"><a href="#">Beats Studio - Lakers</a></p>
				<div><strong class="font088em">Qty </strong><input class="textbox shoppingcart_qty" type="text" value="1"/></div>
			</div>
			<div class="shoppingcart_cartitem radiusall_4px draggable" title="High Quality Headphones - Beats By Dr.Dre">
				<a class="shoppingcart_img" href="#">
					<img src="http://thumbs2.ebaystatic.com/m/mnnb2L2xwSqFOJj-T2hwXXg/140.jpg"/>
				</a>
				<p class="font088em bold"><a href="#">Beats Studio - Lakers</a></p>
				<div><strong class="font088em">Qty </strong><input class="textbox shoppingcart_qty" type="text" value="1"/></div>
			</div>
			<div class="shoppingcart_cartitem radiusall_4px draggable" title="High Quality Headphones - Beats By Dr.Dre">
				<a class="shoppingcart_img" href="#">
					<img src="http://thumbs2.ebaystatic.com/m/mvnDwkh-ZNW_u6hjetEpYLQ/140.jpg"/>
				</a>
				<p class="font088em bold"><a href="#">Beats Studio - Lakers</a></p>
				<div>
					<strong class="font088em">Qty </strong><input class="textbox shoppingcart_qty" type="text" value="1"/>
					<strong class="font088em brown">$299.95 </strong>
				</div>
			</div>

			<div class="clear_5px"></div>			
			<div class="shoppingcart_itembottom">
				<div class="leftfloat"><a class="btn radiusall_2px shadowbox giftwrapping bold" href="#">
					<span></span>
					Free Gift wrapping
				</a>
				&nbsp;&nbsp;
				<a href="#" class="gray font088em">What's this?</a>
				</div>
				<div class="rightfloat font12px shoppingcart_total">
				<span class="gray">Total : </span> <span class="bold"><img src="img/amount.gif" style="position:absolute;bottom:-4px;left:2px;"/>US$1029</span> <span class="gray">+</span> <span class="bold"><img src="img/shipping.gif" style="position:absolute;bottom:-4px;left:2px;"/>US$29.6</span> <span class="gray">=</span> <span class="bold font18px brown">US$ 158.6</span>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		
		<div class="clear_10px"></div>
		
		<div class="radiusall_4px shadowbox relative shoppingcart_package droppable" id="outer">
						
			<div class="shadowbox radiusall_4px shoppingcart_addr shoppingcart_addr_edit textshadow relative">
				<a href="javascript:void(0)" class="shoppingcart_loadaddress">Load from my address list</a>
				<h3 class="paddingbox10px">Address for this package</h3>
				<table>
					<tr>
						<td class="col1">Receiver Full Name : </td>
						<td><input class="textbox" type="text"/>  <span class="bold brown">*</span></td>
					</tr>
					<tr>
						<td class="col1">Street : </td>
						<td><input class="textbox" type="text"/>  <span class="bold brown">*</span></td>
					</tr>
					<tr>
						<td class="col1">Town / City : </td>
						<td><input class="textbox" type="text"/>  <span class="bold brown">*</span></td>
					</tr>
					<tr>
						<td class="col1">State / Province : </td>
						<td><input class="textbox" type="text"/>  <span class="bold brown">*</span></td>
					</tr>
					<tr>
						<td class="col1">Postcode : </td>
						<td><input class="textbox" type="text"/>  <span class="bold brown">*</span></td>
					</tr>
					<tr>
						<td class="col1">Country : </td>
						<td><select><option>China</option><option>Japan</option><option>France</option></select></td>
					</tr>
					<tr>
						<td class="col1">Phone Number : </td>
						<td><input class="textbox" type="text"/> <span class="bold brown">*</span></td>
					</tr>	
					<tr>
						<td class="col1">Contact Mail : </td>
						<td><input class="textbox" type="text"/></td>  
					</tr>
					<tr>
						<td class="col1"></td>
						<td>
							<div class="shoppingcart_saveaddress">
								<input type="checkbox" id="cd_saveaddress"/>
								<label id="saveaddr" for="cd_saveaddress">Add to my address list</label>
							</div>
						</td>
					</tr>
					<tr>
						<td class="col1"></td>
						<td>
							<input type="button" class="normalbtn confirmbt radiusall_2px" value="Save & Continue"/>
							<input type="button" class="normalbtn radiusall_2px" value="Cancel Edit"/>
						</td>
					</tr>
				</table>
			</div>
			
			<div class="clear_5px"></div>
			
			
			<div class="shoppingcart_cartitem radiusall_4px draggable" title="High Quality Headphones - Beats By Dr.Dre">
				<a class="shoppingcart_img" href="#">
					<img src="http://thumbs2.ebaystatic.com/m/mcpjpSaneWAFScKfL9PVdSA/140.jpg"/>
				</a>
				<p class="font088em bold"><a href="#">Beats Studio - Lakers</a></p>
				<div>
					<strong class="font088em">Qty </strong><input class="textbox shoppingcart_qty" type="text" value="1"/>
					<strong class="font088em brown">$299.95 </strong>
				</div>
				<div class="favor"></div>
				<div class="shoppingcart_itemdelete"></div>
			</div>
			<div class="shoppingcart_cartitem radiusall_4px draggable" title="High Quality Headphones - Beats By Dr.Dre">
				<a class="shoppingcart_img" href="#">
					<img src="http://thumbs2.ebaystatic.com/m/mnnb2L2xwSqFOJj-T2hwXXg/140.jpg"/>
				</a>
				<p class="font088em bold"><a href="#">Beats Studio - Lakers</a></p>
				<div><strong class="font088em">Qty </strong><input class="textbox shoppingcart_qty" type="text" value="1"/></div>
			</div>
			<div class="shoppingcart_cartitem radiusall_4px draggable" title="High Quality Headphones - Beats By Dr.Dre">
				<a class="shoppingcart_img" href="#">
					<img src="http://thumbs2.ebaystatic.com/m/mnnb2L2xwSqFOJj-T2hwXXg/140.jpg"/>
				</a>
				<p class="font088em bold"><a href="#">Beats Studio - Lakers</a></p>
				<div><strong class="font088em">Qty </strong><input class="textbox shoppingcart_qty" type="text" value="1"/></div>
			</div>
			<div class="shoppingcart_cartitem radiusall_4px draggable" title="High Quality Headphones - Beats By Dr.Dre">
				<a class="shoppingcart_img" href="#">
					<img src="http://thumbs2.ebaystatic.com/m/mvnDwkh-ZNW_u6hjetEpYLQ/140.jpg"/>
				</a>
				<p class="font088em bold"><a href="#">Beats Studio - Lakers</a></p>
				<div>
					<strong class="font088em">Qty </strong><input class="textbox shoppingcart_qty" type="text" value="1"/>
					<strong class="font088em brown">$299.95 </strong>
				</div>
			</div>

			<div class="clear_5px"></div>			
			<div class="shoppingcart_itembottom">
				<div class="leftfloat"><a class="btn radiusall_2px shadowbox giftwrapping bold" href="#">
					<span></span>
					Free Gift wrapping
				</a>
				&nbsp;&nbsp;
				<a href="#" class="gray font088em">What's this?</a>
				</div>
				<div class="rightfloat font12px shoppingcart_total">
				<span class="gray">Total : </span> <span class="bold"><img src="img/amount.gif" style="position:absolute;bottom:-4px;left:2px;"/>US$1029</span> <span class="gray">+</span> <span class="bold"><img src="img/shipping.gif" style="position:absolute;bottom:-4px;left:2px;"/>US$29.6</span> <span class="gray">=</span> <span class="bold font18px brown">US$ 158.6</span>
				</div>
				<div class="clear"></div>
			</div>
		</div>

		<div class="clear_10px"></div>		
		<input type="button" value="+ Add New Package Address" class="normalbtn rightfloat shoppingcart_addnewpackage radiusall_2px shadowbox" />
		<span class="rightfloat brown" style="display:inline-block;padding:8px 20px;font-weight:bold;">Have another address to send? </span>
		<div class="clear_20px"></div>
		
	</div>
	
	<div class="grid_4">
		<div class="cd_scrollSider grid_4 alpha omega">
			<div class="radiusall_4px shadowbox shoppingcart_finalestimate">
				<!--<div style="" class="shadowbox radiusall_4px shoppingcart_addr textshadow">
					<p class="font12px lightgray bold">
					Package for <strong class="black">Patrick Gray</strong>
					</p>
				</div>
				<div class="clear_5px"></div>
				<div style="" class="shadowbox radiusall_4px shoppingcart_addr textshadow">
					<p class="font12px lightgray bold">
					Package for <strong class="black">Patrick Gray</strong>
					</p>
				</div>	
				<div class="clear_5px"></div>
				<div style="" class="shadowbox radiusall_4px shoppingcart_addr textshadow">
					<p class="font12px lightgray bold">
					Package for <strong class="black">Patrick Gray</strong>
					</p>
				</div>-->
				<table class="tb">
					<tr>
						<td class="col1">
							<span>Total Amount</span>
						</td>
						<td class="bold">
							<span>US$ 599.95</span>
						</td>
					</tr>
					<tr>
						<td class="col1">
							<span>Total Shipping</span>
						</td>
						<td class="bold">
							<span>US$ 199.95</span>
						</td>
					</tr>
					<tr>
						<td class="col1">
							<span>Total</span>
						</td>
						<td class="bold brown">
							<span>US$ 799.9</span>
						</td>
					</tr>
				</table>
				<div class="bottom">
					<input type="button" class="normalbtn shadowbox radiusall_2px shoppingcart_checkoutbtn" value="Checkout the order"/>
				</div>
			</div>
			<div class="clear_15px"></div>
			<div class="radiusall_4px whitetransparentbg30perc shadowbox shoppingcart_trash">
				<div class="paddingbox10px droppable">
				<h2>Trash Bin <span class="subtext">(drag in &amp; drag away)</span></h2>
				<div class="clear_5px"></div>
				<a class="radiusall_4px shadowbox" style="border:4px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="64" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
				<a class="radiusall_4px shadowbox" style="border:4px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="64" src="http://thumbs2.ebaystatic.com/m/mnnb2L2xwSqFOJj-T2hwXXg/140.jpg"/></a>
				<a class="radiusall_4px shadowbox" style="border:4px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="64" src="http://thumbs3.ebaystatic.com/m/mp6ZgDOspls2gtKHenfUJ4g/140.jpg"/></a>
				<a class="radiusall_4px shadowbox" style="border:4px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="64" src="http://thumbs3.ebaystatic.com/m/mp6ZgDOspls2gtKHenfUJ4g/140.jpg"/></a>
				<div class="clear_15px"></div>
				</div>
				<div class="bottom">
					<p class="gray">Items will be cleared automatically.</p>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	
	
	<div class="clear_20px"></div>
	

</div>
<div class="clear_30px"></div>


</body>

</html>
